<template>
  <view class="fly-bar" :style="barStyle" v-if="validBar">
    <view class="fly-bar-cont" :class="[tagClass]">
      <text class="nowrap">
        {{ barInfo.barName }}<template v-if="barInfo.orderStatusName">-{{ barInfo.orderStatusName }}</template
        >{{ barInfo.tag }}<template v-if="barInfo.orderStatusName">&nbsp;{{ barInfo.dateRange }}</template>
      </text>
      <view></view>
      <text class="nowrap">
        <template v-if="barInfo.orderStatusName">{{ barInfo.client }}</template>
        <template v-else>{{ barInfo.dateRange }}</template>
      </text>
    </view>
  </view>
</template>

<script lang="ts">
  import dayjs from 'dayjs'
  import { calcBarPosition } from './tableUtil'
  import { inject } from 'vue'

  // 获取bar类型
  const getBarType = (data: any) => {
    if (data.typeSet.length == 1) {
      return data.typeSet[0]
    }
    if (data.typeSet.includes(5)) {
      return 5
    }
    if (data.typeSet.includes(4)) {
      return 4
    }
    return data.type
  }

  export default {
    name: 'FlyBar',
    props: {
      data: {
        type: Object,
        default: () => {},
      },
    },
    setup(props) {
      const CarStockState = inject('CarStockState')
      const beginTime = CarStockState.dateRange[0] as string
      const endTime = CarStockState.dateRange[1] as string
      const barPosition = calcBarPosition(beginTime, endTime, props.data.fromTime, props.data.toTime, CarStockState.hourPx)

      const refId = 'stock-flybar-' + props.data.id
      // bar类型
      // 0:无占用车辆 3:维修、保养、年检,4:逾期未还,5:车辆冲突,6:丢失,7:临时占用,8:已借出,9:借出未还,10:订单占用,
      // 10:订单占用,【后面归为10】-2:悟空,-3:哈啰,-4:携程,-5:飞猪,-6:滴滴,-7:铁行,-8:飞租,1:线下订单占用,2:渠道订单占用,
      const barType = getBarType(props.data)
      const barInfo = {
        client: props.data.clientName + '-' + props.data.memberPhone,
        dateRange: dayjs(props.data.fromTime).format('MM/DD HH:mm') + ' - ' + dayjs(props.data.toTime).format('MM/DD HH:mm'),
        barName: props.data.channelTypeName ? `${props.data.channelTypeName}` : props.data.useTypeName,
        orderStatusName: props.data.orderStatusName,
        tag: '',
      }

      // 默认
      let zIndex = 10
      // 借出
      if (barType == 8) {
        zIndex = 11
        barInfo.barName = props.data.createUser + '借出'
        //  借出未还
      } else if (barType == 9) {
        zIndex = 11
        barInfo.barName = props.data.createUser + '借出(逾)'
      }
      // 订单占用
      else if (barType == 1 || barType == 2 || barType == 100 || barType == 200) {
        zIndex = 12
      }
      // 临时占用
      else if (barType == 7) {
        zIndex = 12
        barInfo.barName = props.data.createUser + '占用'
      }
      // 逾期
      else if (barType == 4) {
        barInfo.tag = '(逾)'
      }
      // 冲突
      else if (barType == 5) {
        zIndex = 15
        if (props.data.typeSet.includes(7)) {
          barInfo.barName = props.data.createUser + '占用'
        }
        barInfo.tag = '(冲)'
      }
      // 丢失
      else if (barType == 6) {
        zIndex = 20
      }
      const validBar = barPosition.width > 0

      return {
        refId,
        barInfo,
        // 状态class
        tagClass: 'tag_' + barType,
        validBar,
        barStyle: {
          width: barPosition.width + 'px',
          left: barPosition.left + 'px',
          zIndex,
        },
      }
    },
  }
</script>

<style lang="less" scoped>
  @import '../../tag.less';
  // 比格子小1px
  @tdHeight: 35px;
  .fly-bar {
    position: absolute;
    top: 0rpx;
    left: 10px;
    z-index: 88;
    height: @tdHeight;
    pointer-events: none;
    overflow: hidden;

    &-cont {
      position: relative;
      height: 100%;
      font-weight: 400;
      font-size: 24rpx;
      color: #fff;
      line-height: 16px;
      padding: 4rpx 12rpx 0;
      .nowrap {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
      }

      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8rpx;
      }
    }
  }
</style>
